Bemästra CSS: Anpassad Egenskapsregistrering med @property

Anpassade egenskaper (även kända som CSS-variabler) har revolutionerat hur vi skriver och underhåller CSS. De tillåter oss att definiera återanvändbara värden, vilket gör våra stilmallar mer flexibla och underhållbara. Men vad händer om du kan gå utöver att bara definiera värden? Vad händer om du kan definiera typen av värde som en anpassad egenskap innehåller, tillsammans med dess initiala värde och arvsbeteende? Det är där @property kommer in.

Vad är @property?

@property är en CSS at-regel som låter dig uttryckligen registrera en anpassad egenskap hos webbläsaren. Denna registreringsprocess ger webbläsaren information om egenskapens förväntade typ, dess initiala värde och om den ska ärvas från dess överordnade element. Detta låser upp flera avancerade funktioner, inklusive:

• Typkontroll: Säkerställer att den anpassade egenskapen tilldelas ett värde av rätt typ.
• Animering: Möjliggör smidiga övergångar och animeringar för anpassade egenskaper av specifika typer, som siffror eller färger.
• Standardvärden: Ger ett reservvärde om den anpassade egenskapen inte är uttryckligen definierad.
• Arvskontroll: Bestämmer om den anpassade egenskapen ärver sitt värde från dess överordnade element.

Tänk på det som att lägga till typsäkerhet till dina CSS-variabler. Det låter dig skapa mer robusta och förutsägbara stilmallar.

Syntaxen för @property

@property-regeln följer denna grundläggande syntax:

@property --egenskapsnamn {
  syntax: '';
  inherits: true | false;
  initial-value: ;
}

Låt oss bryta ner varje del:

• --egenskapsnamn: Namnet på den anpassade egenskapen du vill registrera. Den måste börja med två bindestreck (--).
• syntax: Definierar den förväntade typen av värde för egenskapen. Detta är avgörande för typkontroll och animering. Vi kommer att utforska de tillgängliga syntaxvärdena i detalj nedan.
• inherits: Ett booleskt värde som indikerar om egenskapen ska ärvas från dess överordnade element. Standardvärdet är false om det inte anges.
• initial-value: Standardvärdet för egenskapen om det inte är uttryckligen inställt på ett element. Detta säkerställer att ett reservvärde alltid är tillgängligt.

Förstå syntax-deskriptorn

syntax-deskriptorn är den viktigaste delen av @property-regeln. Den talar om för webbläsaren vilken typ av värde som förväntas för den anpassade egenskapen. Här är några vanliga syntaxvärden:

• *: Tillåter vilket värde som helst. Detta är den mest tillåtande syntaxen och replikerar i huvudsak beteendet hos en vanlig CSS-variabel utan registrering. Använd detta sparsamt.
• <length>: Förväntar sig ett längdvärde (t.ex. 10px, 2em, 50%). Detta möjliggör smidiga animeringar mellan olika längdvärden.
• <number>: Förväntar sig ett numeriskt värde (t.ex. 1, 3.14, -5). Användbart för att animera numeriska egenskaper som opacitet eller skala.
• <percentage>: Förväntar sig ett procentvärde (t.ex. 25%, 100%).
• <color>: Förväntar sig ett färgvärde (t.ex. #f00, rgb(255, 0, 0), hsl(0, 100%, 50%)). Möjliggör smidiga färgövergångar och animeringar.
• <image>: Förväntar sig ett bildvärde (t.ex. url(image.jpg), linear-gradient(...)).
• <integer>: Förväntar sig ett heltal (t.ex. 1, -10, 0).
• <angle>: Förväntar sig ett vinkelvärde (t.ex. 45deg, 0.5rad, 200grad). Användbart för att animera rotationer.
• <time>: Förväntar sig ett tidsvärde (t.ex. 1s, 500ms). Användbart för att kontrollera animeringslängder eller fördröjningar via anpassade egenskaper.
• <resolution>: Förväntar sig ett upplösningsvärde (t.ex. 300dpi, 96dpi).
• <transform-list>: Förväntar sig en lista med transformationsfunktioner (t.ex. translateX(10px) rotate(45deg)). Tillåter animering av komplexa transformationer.
• <custom-ident>: Förväntar sig en anpassad identifierare (en sträng). Liknar en enum.
• <string>: Förväntar sig ett strängvärde (t.ex. "Hello World"). Var försiktig med detta, eftersom animering av strängar i allmänhet inte stöds.
• Anpassade syntaxer: Du kan skapa mer komplexa syntaxer med hjälp av kombinationer av ovanstående och operatorerna | (eller), `[]` (gruppering), `+` (en eller flera), `*` (noll eller flera) och `?` (noll eller en). Till exempel: <length> | <percentage> tillåter antingen en längd eller ett procentvärde.

Att välja rätt syntax är avgörande för att utnyttja den fulla kraften i @property.

Praktiska exempel på @property

Låt oss titta på några praktiska exempel på hur du använder @property i din CSS.

Exempel 1: Animera en bakgrundsfärg

Anta att du vill animera bakgrundsfärgen på en knapp. Du kan använda @property för att registrera en anpassad egenskap för bakgrundsfärgen och sedan animera den med CSS-övergångar.

@property --bg-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #fff;
}

.button {
  background-color: var(--bg-color);
  transition: --bg-color 0.3s ease;
}

.button:hover {
  --bg-color: #f00; /* Röd */
}

I det här exemplet registrerar vi den anpassade egenskapen --bg-color med <color>-syntaxen, vilket innebär att den förväntar sig ett färgvärde. initial-value är inställt på vitt (#fff). När musen hovrar över knappen ändras --bg-color till rött (#f00), och övergången animerar smidigt bakgrundsfärgsändringen.

Exempel 2: Kontrollera kantradie med ett nummer

Du kan använda @property för att kontrollera kantradien för ett element och animera den.

@property --border-radius {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

.rounded-box {
  border-radius: var(--border-radius);
  transition: --border-radius 0.5s ease;
}

.rounded-box:hover {
  --border-radius: 20px;
}

Här registrerar vi --border-radius som en <length>, vilket säkerställer att den accepterar längdvärden som px, em eller %. Det initiala värdet är 0px. När du hovrar över .rounded-box animeras kantradien till 20px.

Exempel 3: Animera en skuggförskjutning

Låt oss säga att du vill animera den horisontella förskjutningen av en boxskugga.

@property --shadow-offset-x {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

.shadowed-box {
  box-shadow: var(--shadow-offset-x) 5px 10px rgba(0, 0, 0, 0.5);
  transition: --shadow-offset-x 0.3s ease;
}

.shadowed-box:hover {
  --shadow-offset-x: 10px;
}

I det här fallet registreras --shadow-offset-x som en <length>, och dess initiala värde är 0px. Egenskapen box-shadow använder denna anpassade egenskap för sin horisontella förskjutning. Vid hovring animeras förskjutningen till 10px.

Exempel 4: Använda <custom-ident> för teman

Syntaxen <custom-ident> låter dig definiera en uppsättning fördefinierade strängvärden, vilket effektivt skapar en enum för dina CSS-variabler. Detta är användbart för teman eller för att kontrollera distinkta tillstånd.

@property --theme {
  syntax: '<custom-ident>';
  inherits: true;
  initial-value: light;
}

:root {
  --theme: light; /* Standardtema */
}

body {
  background-color: var(--theme) == light ? #fff : #333;
  color: var(--theme) == light ? #000 : #fff;
}

.dark-theme {
  --theme: dark;
}

Här registreras --theme med <custom-ident>-syntaxen. Även om vi inte uttryckligen listar de tillåtna identifierarna i själva @property-regeln, antyder koden att de är `light` och `dark`. CSS:en använder sedan villkorslogik (var(--theme) == light ? ... : ...) för att tillämpa olika stilar baserat på det aktuella temat. Att lägga till klassen `dark-theme` till ett element växlar temat till mörkt. Observera att villkorslogik med `var()` inte är standard-CSS och ofta kräver preprocessors eller JavaScript. En mer standardmetod skulle använda CSS-klasser och kaskadering:

@property --theme {
  syntax: '<custom-ident>';
  inherits: true;
  initial-value: light;
}

:root {
  --theme: light;
}

body {
  background-color: #fff;
  color: #000;
}

body[data-theme="dark"] {
  background-color: #333;
  color: #fff;
}

/* JavaScript för att växla temat */
/* document.body.setAttribute('data-theme', 'dark'); */

I detta reviderade exempel använder vi ett data-theme-attribut på body-elementet för att styra temat. JavaScript (utkommenterad) skulle användas för att växla attributet mellan `light` och `dark`. Detta är ett mer robust och standardmässigt tillvägagångssätt för teman med CSS-variabler.

Fördelar med att använda @property

Att använda @property ger flera fördelar:

• Förbättrad kodläsbarhet och underhållbarhet: Genom att uttryckligen definiera den förväntade typen av värde för en anpassad egenskap gör du din kod mer förståelig och mindre benägen att innehålla fel.
• Förbättrade animeringsmöjligheter: @property möjliggör smidiga övergångar och animeringar för anpassade egenskaper, vilket öppnar upp nya möjligheter för att skapa dynamiska och engagerande användargränssnitt.
• Bättre prestanda: Webbläsare kan optimera renderingen av element med hjälp av registrerade anpassade egenskaper, vilket leder till förbättrad prestanda.
• Typsäkerhet: Webbläsaren validerar att det tilldelade värdet matchar den deklarerade syntaxen, vilket förhindrar oväntat beteende och gör felsökningen enklare. Detta är särskilt användbart i stora projekt där många utvecklare bidrar till koden.
• Standardvärden: Att säkerställa att en anpassad egenskap alltid har ett giltigt värde, även om det inte är uttryckligen inställt, förhindrar fel och förbättrar robustheten i din CSS.

Webbläsarkompatibilitet

Från och med sent 2023 har @property bra, men inte universellt, webbläsarstöd. Det stöds i de flesta moderna webbläsare, inklusive Chrome, Firefox, Safari och Edge. Äldre webbläsare kanske dock inte stöder det. Kontrollera alltid den senaste webbläsarkompatibilitetsinformationen på webbplatser som Can I use... innan du använder @property i produktion.

För att hantera äldre webbläsare kan du använda funktionsfrågor (@supports) för att tillhandahålla reservstilar:

@supports (--property: value) {
  /* Stilar som använder @property */
}

@supports not (--property: value) {
  /* Reservstilar för webbläsare som inte stöder @property */
}

Ersätt --property och value med en faktisk anpassad egenskap och dess värde.

När ska du använda @property

Överväg att använda @property i följande scenarier:

• När du behöver animera anpassade egenskaper: Detta är det primära användningsområdet för @property. Att registrera egenskapen med rätt syntax möjliggör smidiga animeringar.
• När du vill genomdriva typsäkerhet för anpassade egenskaper: Om du vill säkerställa att en anpassad egenskap alltid innehåller ett värde av en specifik typ, använd @property för att registrera den.
• När du vill tillhandahålla ett standardvärde för en anpassad egenskap: initial-value-deskriptorn låter dig ange ett reservvärde.
• I stora projekt: @property förbättrar kodunderhållbarheten och förhindrar fel, vilket gör det särskilt fördelaktigt för stora projekt med många utvecklare.
• När du skapar återanvändbara komponenter eller designsystem: @property kan hjälpa till att säkerställa konsekvens och förutsägbarhet mellan dina komponenter.

Vanliga misstag att undvika

• Glömma syntax-deskriptorn: Utan syntax-deskriptorn vet inte webbläsaren den förväntade typen av värde, och animeringar fungerar inte korrekt.
• Använda fel syntax-värde: Att välja fel syntax kan leda till oväntat beteende. Se till att välja den syntax som korrekt återspeglar den förväntade typen av värde.
• Inte tillhandahålla ett initial-value: Utan ett initialt värde kan den anpassade egenskapen vara odefinierad, vilket leder till fel. Ange alltid ett vettigt standardvärde.
• Överanvända * som syntax: Även om det är bekvämt, upphäver användningen av * fördelarna med typkontroll och animering. Använd det bara när du verkligen behöver tillåta vilken typ av värde som helst.
• Ignorera webbläsarkompatibilitet: Kontrollera alltid webbläsarkompatibilitet och tillhandahåll reservstilar för äldre webbläsare.

@property och CSS Houdini

@property är en del av en större uppsättning API:er som kallas CSS Houdini. Houdini låter utvecklare utnyttja webbläsarens renderingsmotor, vilket ger dem oöverträffad kontroll över stylingen och layoutprocessen. Andra Houdini-API:er inkluderar:

• Paint API: Låter dig definiera anpassade bakgrundsbilder och ramar.
• Animation Worklet API: Ger ett sätt att skapa högpresterande animeringar som körs direkt i webbläsarens kompositortråd.
• Layout API: Låter dig definiera anpassade layoutalgoritmer.
• Parser API: Ger åtkomst till webbläsarens CSS-parser.

@property är ett relativt enkelt Houdini-API att lära sig, men det öppnar dörren till att utforska mer avancerade Houdini-funktioner.

Slutsats

@property är en kraftfull CSS at-regel som låser upp avancerade funktioner för anpassade egenskaper. Genom att registrera anpassade egenskaper hos webbläsaren kan du genomdriva typsäkerhet, möjliggöra smidiga animeringar och förbättra den övergripande robustheten i din CSS-kod. Även om webbläsarstödet inte är universellt, gör fördelarna med att använda @property, särskilt i stora projekt och designsystem, det till ett värdefullt verktyg för modern webbutveckling. Omfamna @property och ta dina CSS-kunskaper till nästa nivå!